<template>
  <div class="main_form">
    <div
      v-for="(config, index) in olList"
      :key="config.title + index"
    >
      <aiTitle :title="config.title" />
      <div class="main_content">
        <span class="ai-form-desc">{{ config.desc || '' }}</span>
        <div
          v-for="(main, mIndex) in pointList"
          :key="main.value + mIndex"
        >
          <p class="point-title">{{ main.title }}</p>
          <div :class="main.value+'-sort-box'">
            <flex
              v-for="(point, pIndex) in main.list"
              :key="main.value + mIndex + pIndex"
              align="center"
              class="point-area"
            >
              <span class="point-order">{{ pIndex + 1 }}</span>
              <el-input
                v-model="point.label"
                type="textarea"
                clearable
                autosize
                placeholder=""
                class="point-input"/>
              <img
                src="@/static/img/move.png"
                alt="拖拽"
                class="icon-rank">
              <img
                src="@/static/img/delete.png"
                alt="删除"
                class="icon-delete"
                @click="handlePointDelete(mIndex, pIndex)">
            </flex>
          </div>
          <el-button
            plain
            type="primary"
            size="mini"
            class="ai-list-button"
            @click="handlePointAdd(mIndex)"
          >
            新增章节
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
import aiTitle from './aiTitle.vue'

export default {
  components: { aiTitle },
  props: {
    configOlList: {
      type: Array,
      default: () => []
    },
    configOlData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      olList: [],
      pointList: [],
    }
  },
  watch: {
    configOlList: {
      deep: true,
      handler () {
        this.getFormShowList()
      }
    }
  },
  mounted () {
    this.getFormShowList()
  },
  methods: {
    getFormShowList () {
      this.olList = JSON.parse(JSON.stringify(this.configOlList))
      this.pointList = this.configOlData || []
      this.$nextTick(() => {
        this.handleDropLi()
      })
    },
    handlePointAdd (index) {
      this.pointList[index].list.push({label: ''})
      this.$nextTick(() => {
        this.handleDropLi()
      })
    },
    handlePointDelete (parentIndex, currentIndex) {
      this.pointList[parentIndex].list.splice(currentIndex, 1)
    },
    handleDropLi () {
      let _this = this
      this.pointList.map((el, index) => {
        // 此时找到的元素是要拖拽元素的父容器
        const liBox = document.querySelector(`.${el.value}-sort-box`)
        Sortable.create(liBox, {
          filter:'.point-input',
          preventOnFilter: false,
          animation: 180,
          delay: 0,
          draggable: '.point-area', // 指定父元素下可被拖拽的子元素
          onEnd ({ newIndex, oldIndex }) {
            _this.handleDragData(index, newIndex, oldIndex)
          }
        })
      })
    },
    handleDragData (index, newIndex, oldIndex) {
      let currRow = this.pointList[index].list.splice(oldIndex, 1)[0]
      this.pointList[index].list.splice(newIndex, 0, currRow)
      let newData = this.pointList[index].list.slice(0)
      this.pointList[index].list = []
      this.$nextTick(() => {
        this.pointList[index].list = newData
      })
    },
    getPointDataList () {
      return this.pointList
    }
  }
}
</script>

<style scoped>
.main_form {
  height: 100%;
  padding: 0 10px 10px;
  box-sizing: border-box;
}
.main_content {
  min-height: 600px;
  margin: 1px;
  padding: 10px;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #FFF;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2);
}
.ai-form-desc {
  color: #909199;
  font-size: 12px;
}
.point-title {
  margin-bottom: 20px;
}
.point-area {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px 10px;
}
.point-area >>> .el-textarea .el-textarea__inner {
  font-family: Arial;
  background-color: #FAFAFA;
}
.point-area >>> .el-textarea .el-textarea__inner:focus {
  background-color: #FFF;
}
.point-order {
  padding-right: 10px;
}
.el-icon-rank {
  padding: 0 10px;
}
.el-icon-rank:hover {
  cursor: move;
  color: #409EFF;
}
.el-icon-delete {
  color: #F56C6C;
}
.el-icon-delete:hover {
  cursor: pointer;
}
.icon-rank {
  width: 14px;
  height: 14px;
  cursor: move;
  padding: 0 10px;
}
.icon-delete {
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.ai-list-button {
  margin-left: 28px;
}
</style>
